<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left">
            <el-form-item label="订单编号">
                <el-input v-model="formInline.orderNum"></el-input>
            </el-form-item>
            <el-form-item label="订单时间">
                <div class="block">
                    <el-date-picker v-model="formInline.startTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                    <span>-</span>
                    <el-date-picker v-model="formInline.endTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getprovisionalpay">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="warning" icon="el-icon-download" @click="exportToExcel">批量导出</el-button>
            </el-form-item>
        </el-form>

        <el-dialog title="具体情况" :visible.sync="dialogVisible" >
            <el-table border :data="postData">
                <el-table-column property="orderNum" label="订单编号" align="center"></el-table-column>
                <el-table-column property="approachTime" label="进场时间" align="center"></el-table-column>
                <el-table-column property="parkingFee" label="停车费用" align="center"></el-table-column>
                <el-table-column property="orderDate" label="订单日期" align="center"></el-table-column>
                <el-table-column property="carNum" label="车牌号码" align="center"></el-table-column>
                <el-table-column property="parkingDuration" label="停车时长" align="center"></el-table-column>
                <el-table-column property="realPayMoney" label="实付金额" align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="sortid" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="orderNum" label="订单编号" align="center">
            </el-table-column>
            <el-table-column prop="carNum" label="车牌号码" align="center">
            </el-table-column>
            <el-table-column prop="approachTime" label="进场时间" align="center">
            </el-table-column>
            <el-table-column prop="parkingDuration" label="停车时长" align="center">
            </el-table-column>
            <el-table-column prop="parkingFee" label="停车费用" align="center">
            </el-table-column>
            <el-table-column prop="realPayMoney" label="实付金额" align="center">
            </el-table-column>
            <el-table-column prop="orderDate" label="订单日期" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" @click="showprovisionalpay(scope.row)">查看</el-link>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
    </div>
</template>
<script>
import { getprovisionalpayapi } from "@/api/area/ProvisionalPay"
import { export_json_to_excel } from "@/excel/Export2Excel";
export default {
    data() {
        return {
            tableData: [],
            formInline: {
                pageIndex: 1,
                pageSize: 10,
                orderNum: '',
                carNum: '',
                startTime: '',
                endTime: ''
            },
            count: 0,
            dialogVisible: false,
            formData: {
                id: 0,
                sortid: 0,
                orderNum: '',
                carNum: '',
                approachTime: '',
                parkingDuration: 0,
                parkingFee: 0,
                realPayMoney: 0,
                orderDate: ''
            },
            postData: []
        }
    },
    methods: {
        getprovisionalpay() {
            getprovisionalpayapi(this.formInline).then(res => {
                this.tableData = res.data.data
                this.count = res.data.totalCount
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formInline.pageSize = val
            this.getprovisionalpay()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.formInline.pageIndex = val
            this.getprovisionalpay()
        },
        resetForm() {
            this.formInline.orderNum = '',
                this.formInline.carNum = '',
                this.formInline.startTime = ''
            this.formInline.endTime = ''
        },
        showprovisionalpay(row) {
            this.dialogVisible = true
            this.formData = row
            this.postData.push(row)
        }, onChange(file, fileList) {
            console.log(fileList);
            this.fileData = file; // 保存当前选择文件
            this.readExcel(); // 调用读取数据的方法
        },
        // 读取数据
        readExcel(e) {
            // console.log(e);
            let that = this;
            const files = that.fileData;
            // console.log(files);
            if (!files) {
                //如果没有文件
                return false;
            } else if (!/.(xls|xlsx)$/.test(files.name.toLowerCase())) {
                this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
                return false;
            }
            const fileReader = new FileReader();
            fileReader.onload = (ev) => {
                try {
                    const data = ev.target.result; // console.log(data)
                    const workbook = this.XLSX.read(data, {
                        type: "binary",
                    });
                    console.log(workbook.SheetNames);
                    if (workbook.SheetNames.length >= 1) {
                        this.$message({
                            message: "导入数据表格成功",
                            showClose: true,
                            type: "success",
                        });
                    }
                    const wsname = workbook.SheetNames[0]; //取第一张表
                    const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
                    // console.log(ws);
                    that.outputs = []; //清空接收数据
                    for (var i = 0; i < ws.length; i++) {
                        var sheetData = {
                            // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                            id: ws[i]["id"],
                            sortid: ws[i]["序号"],
                            orderNum: ws[i]["订单编号"],
                            carNum: ws[i]["车牌号码"],
                            approachTime: ws[i]["进场时间"],
                            parkingDuration: ws[i]["停车时长"],
                            parkingFee: ws[i]["停车费用"],
                            realPayMoney: ws[i]["实付金额"],
                            orderDate: ws[i]["订单日期"],
                        };
                        that.formData.unshift(sheetData);
                    }
                    console.table(that.formData)
                    this.$refs.upload.value = "";
                } catch (e) {
                    return false;
                }
            }; // 如果为原生 input 则应是 files[0]
            fileReader.readAsBinaryString(files.raw);
        },
        exportToExcel() {
            //excel数据导出
            require.ensure([], () => {
                const tHeader = [
                    "id",
                    "序号",
                    "订单编号",
                    "车牌号码",
                    "进场时间",
                    "停车时长",
                    "停车费用",
                    "实付金额",
                    "订单日期",
                ];
                const filterVal = [
                    "id",
                    "sortid",
                    "orderNum",
                    "carNum",
                    "approachTime",
                    "parkingDuration",
                    "parkingFee",
                    "realPayMoney",
                    "orderDate"
                ];
                const list = this.tableData;//导出这个list集合对象
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, "学生列表excel");
            });
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map((v) => filterVal.map((j) => v[j]));
        },
    },
    created() {
        this.getprovisionalpay()
    }
}
</script>
<style></style>